<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="ui" uri="http://jquery.ui.tag" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <style type="text/css">
    
		*{
			background-image: url("style/background.jpg");
		}
    </style>

    <%@ include file="/header.jsp" %>
    <script type="text/javascript">
    	function clickBt(v){
    		//alert(v);
    		$("#dialog").simpleDialog("open");
    	}
    </script>
  	<ui:script.ready>
  		<ui:accordions renderTo="accordions" heightStyle="content" collapsible="true" sortable="true"/>
  		<ui:button renderTo="button" onClick="clickBt('1')"/>
  		<ui:datepicker renderTo="datepicker" numberOfMonths="2" buttonImage="style/images/calendar.gif" minDate="-2D" maxDate="+1Y"
  		  changeYear="true" changeMonth="true" showButtonPanel="true" selectOtherMonths="false" showOtherMonths="true"/>
  		<ui:datepicker renderTo="datepickerDiv" numberOfMonths="5"  onSelect="clickBt('v')"
  		changeYear="true" changeMonth="true" showButtonPanel="true" selectOtherMonths="false"
  		 showOtherMonths="true" buttonImage="style/images/calendar.gif"/>
  		 <ui:tabs renderTo="tabs" sortable="true" collapsible="true">
  		 	<ui:tab title="tab1" showClose="true" renderTo="tab1"/>
  		 	<ui:tab title="tab2" renderTo="tab2" href="result.jsp"/>
  		 	<ui:tab title="tab3" renderTo="tab3"/>
  		 </ui:tabs>
  	<ui:dialog renderTo="dialog" title="系统提示" height="500" width="600" modal="true" dialogType="iframe" src="http://www.baidu.com"/>
  	
  	$( "#dialog" ).simpleDialog({
	title:"系统提示",
	width:"600",
	height:"500",
	type:"iframe",
	 src:"http://www.baidu.com",	
		
	modal:true
});
  		$("#grid").jqGrid({
   	url:"/jqueryui/data/grid.json",
	datatype: "json",  	
   	colModel:[
  		{name:"id",index:"id", width:"100%",align:"center",sortabl:true},
  		{name:"invdate",index:"invdate", width:"100%",align:"center",sortabl:true},
  		{name:"name",index:"name", width:"100%",align:"center",sortabl:true},
  		{name:"amount",index:"amount", width:"100%",align:"center",sortabl:true},
  		{name:"tax",index:"tax", width:"100%",align:"center",sortabl:true},
  		{name:"total",index:"total", width:"100%",align:"center",sortabl:true},
  		{name:"note",index:"note", width:"100%",align:"center",sortabl:true},
  		],
   	colNames:[
   			   			"id" ,
	   			"日期" ,
	   			"名称" ,
	   			"金额" ,
	   			"余额" ,
	   			"总余额" ,
	   			"话费" 
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager:$("#grid").next(),
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    jsonReader: {
		repeatitems : false,
		id: "0"
	},
	width:"auto",
    caption:"grid Example"
});
  	</ui:script.ready>
  	
  </head>
  
  <body>
  
    <ui:html.accordions id="accordions"> 
    	<ui:html.accordion title="test"></ui:html.accordion> 
    	<ui:html.accordion title="test11"></ui:html.accordion> 
    </ui:html.accordions>
  	<input type="button" value="click me" id="button"/>
  	<input type="text" id="datepicker">
  	<div id="datepickerDiv"></div>
  	<ui:html.tabs id="tabs">
  		<ui:html.tab id="tab1" >
  		  <iframe src="http://www.baidu.com" width="100%"></iframe>
  		</ui:html.tab>
  		<ui:html.tab id="tab2">
  			
  			<table align="center" valign="middle">
  				<tr>
  				<td align="center" valign="middle"><img src="style/images/recommend-loading.gif"></img></td>
  				</tr>
  			</table>
  		</ui:html.tab>
  		<ui:html.tab id="tab3">
  		
  		</ui:html.tab>
  	</ui:html.tabs>
  	<div id="dialog">确定删除吗？</div>
  	<fieldset>
  		<legend>test</legend>
  	</fieldset>
  	<ui:html.grid id="grid"/>
  	
  </body>
</html>
